<template>
  <view class="myicon">
    <block v-if="flage">
      <view  v-for="(item,index) in icon" :key="index" @click="handleActive(index)">
        <view class="icon" :class="{active:active==index}">
          <view :class="`t-icon t-icon-${item.icon}`"></view>
        </view>
        <text style="font-size: 14px;">{{item.name}}</text>
      </view>
    </block>
    <block v-else>
      <view v-for="item,index in icon1" :key="index" @click="handleActive1(index)">
        <view class="icon" :class="{active:active1==index}">
          <view :class="`t-icon t-icon-${item.icon}`"></view>
        </view>
        <text style="font-size: 14px;">{{item.name}}</text>
      </view>
    </block>
  </view>
</template>

<script>
  export default {
    name: "icon",
    props:{
      flage:{
        type:Boolean,
        default:true,
      },
      iconObj:{
        type:Object,
        default:{type:-1,name:''}
      }
    },
    mounted() {
      this.updateIcon()
    },
    data() {
      return {
        icon: [
          {
            name: '餐饮',
            icon: 'xican'
          },
          {
            name: '借出',
            icon: 'jiekuan'
          },
          {
            name: '购物',
            icon: 'gouwu'
          },
          {
            name: '学习',
            icon: 'xuexi'
          },
          {
            name: '零食',
            icon: 'snacks'
          },
          {
            name: '通讯',
            icon: 'tongxunfei'
          },
          {
            name: '医疗',
            icon: 'yiliaoxiang'
          },
          {
            name: '旅行',
            icon: 'lvhang'
          },
          {
            name: '快递',
            icon: 'kuaidi'
          },
          {
            name: '水果',
            icon: 'shuiguopingguo'
          },
          {
            name: '其他',
            icon: 'wenhao'
          },
          {
            name: '红包',
            icon: 'hongbao'
          },
        ],
        icon1: [{
            name: '收入',
            icon: 'shoukuanrenling'
          },
          {
            name: '工资',
            icon: 'gongziqiarenzheng'
          },
          {
            name: '红包',
            icon: 'hongbao'
          },
          {
            name: '其他',
            icon: 'wenhao'
          }
        ],
        active:-1,
        active1:-1
      };
    },
    methods:{
      handleActive(i){
        this.active = i
        this.$emit('handleIcon',this.icon[i])
      },
      handleActive1(i){
        this.active1 = i
        this.$emit('handleIcon1',this.icon1[i])
      },
      // 判断是否有修改的值
      updateIcon(){
        // console.log(2);
        // console.log(this.iconObj);
        let i = this.iconObj.type
        switch(i){
          case -1:
            break
          case 0:
          // console.log(this.iconObj,this.icon)
            this.active = this.icon.findIndex((v,i)=>{
              return v.name == this.iconObj.name
            })
            this.$emit('handleIcon',this.icon[this.active])
            break
          case 1:
            this.active1 = this.icon1.findIndex((v,i)=>{
              return v.name == this.iconObj.name
            })
            this.$emit('handleIcon1',this.icon1[this.active1])
            break
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .active {
    border: 2px solid #0ff;
  }
  .myicon {
    width: 95%;
    // padding: 0 10%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    view {
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  .icon {
    width: 45px;
    height: 45px;
    // flex: 1;
    margin-bottom: 10px;
    background-color: #eee;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
